<template>
  <div class="mainDiv">
    <el-container class="main_container">
      <el-main>
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"><i class="el-icon-tickets"></i> 订单信息</span>
            <el-card>
              <div slot="header" class="clearfix">
                <span>订单信息</span>
              </div>
             <el-descriptions direction="vertical" :column="4" border>
               <el-descriptions-item label="部门">{{form.deptName}}</el-descriptions-item>
               <el-descriptions-item label="订单号">{{form.orderNo}}</el-descriptions-item>
               <!-- <el-descriptions-item label="委托单号">{{form.entrustNo}}</el-descriptions-item> -->
               <el-descriptions-item label="客户名称">{{form.clientName}}</el-descriptions-item>
               <el-descriptions-item label="客户联系人">{{form.clientContacts}}</el-descriptions-item>
                <el-descriptions-item label="客户联系电话">{{form.clientTel}}</el-descriptions-item>
                <el-descriptions-item label="是否拖车"><span>{{form.isTrailer =='0'?'否':'是'}}</span></el-descriptions-item>
                <el-descriptions-item label="订单状态"><dict-tag :options="dict.type.tms_order_status" :value="form.status" /></el-descriptions-item>
             </el-descriptions>
            </el-card>

            <el-card>
              <div slot="header" class="clearfix">
                <span>地址信息</span>
              </div>
             <el-row :gutter="15">
               <el-col :span="12">
                 <el-descriptions title="寄件信息" direction="vertical" :column="4" border>
                   <el-descriptions-item label="寄件单位">{{form.sendAddr}}</el-descriptions-item>
                   <el-descriptions-item label="寄件联系人">{{form.sendContacts}}</el-descriptions-item>
                   <el-descriptions-item label="寄件联系电话">{{form.sendTel}}</el-descriptions-item>
                   <el-descriptions-item label="寄件地址">{{form.sendAddress}}</el-descriptions-item>
                 </el-descriptions>
               </el-col>
               <el-col :span="12">
                 <el-descriptions title="收件信息" direction="vertical" :column="4" border>
                   <el-descriptions-item label="收件单位">{{form.takeAddr}}</el-descriptions-item>
                   <el-descriptions-item label="收件联系人">{{form.takeContacts}}</el-descriptions-item>
                   <el-descriptions-item label="收件联系电话">{{form.takeTel}}</el-descriptions-item>
                   <el-descriptions-item label="收件地址">{{form.takeAddress}}</el-descriptions-item>
                   <el-descriptions-item label="收件备注">{{form.takeMemo}}</el-descriptions-item>
                 </el-descriptions>
               </el-col>
             </el-row>
            </el-card>
            <!-- <el-card>
              <div slot="header" class="clearfix">
                <span>物品信息</span>
              </div>
              <el-descriptions direction="vertical" :column="4" border style="margin-bottom: 15px;">
                <el-descriptions-item label="物品数量">{{form.nums}}</el-descriptions-item>
                <el-descriptions-item label="物品体积">{{form.volume}}</el-descriptions-item>
                <el-descriptions-item label="物品重量">{{form.weight}}</el-descriptions-item>
              </el-descriptions>
            </el-card> -->
            <el-card>
              <div slot="header" class="clearfix">
                <span>物品清单</span>
              </div>
              <el-table :loading="true" :data="form.items" border stripe>
                <el-table-column label="编号" prop="pno" />
                <el-table-column label="名称" prop="name" />
                <el-table-column label="数量" prop="nums" />
              </el-table>
            </el-card>
            <el-card v-if="form.buss == '1'">
              <div slot="header" class="clearfix">
                <span>车辆附件</span>
              </div>
              <el-card class="fl mr10 mb10" style="width: 32%">
                <div slot="header" class="clearfix">
                  <span>车架号</span>
                </div>
                <!-- <template v-for="pics in form.carOss">
                  <el-image :src="pics.url" style="width: 120px;height: 80px;margin-right: 10px;"
                   :preview-src-list="[pics.url]"/>
                </template> -->
                <el-image v-if="form.carOss && form.carOss.length > 0" v-for="(pic,pindex) in form.carOss"
                style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')" fit="scale-down"
                :preview-src-list="ossTransfer(form.carOss,'list')"></el-image>
              </el-card>
              <el-card class="fl mr10 mb10" style="width: 32%">
                <div slot="header" class="clearfix">
                  <span>交接现场</span>
                </div>
                <!-- <template v-for="pics in form.handoverOss">
                  <el-image :src="pics.url" style="width: 120px;height: 80px;margin-right: 10px;"
                   :preview-src-list="[pics.url]"/>
                </template> -->
                <el-image v-if="form.handoverOss && form.handoverOss.length > 0" v-for="(pic,pindex) in form.handoverOss"
                style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')" fit="scale-down"
                :preview-src-list="ossTransfer(form.handoverOss,'list')"></el-image>
              </el-card>
              <el-card class="fl mr10 mb10" style="width: 32%" v-if="form.loadOss && form.loadOss.length > 0">
                <div slot="header" class="clearfix">
                  <span>45度装车</span>
                </div>
                <!-- <template v-for="pics in form.loadOss">
                  <el-image :src="pics.url" style="width: 120px;height: 80px;margin-right: 10px;"
                   :preview-src-list="[pics.url]"/>
                </template> -->
                <el-image v-if="form.loadOss && form.loadOss.length > 0" v-for="(pic,pindex) in form.loadOss"
                style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')" fit="scale-down"
                :preview-src-list="ossTransfer(form.loadOss,'list')"></el-image>
              </el-card>
              <el-card class="fl mr10 mb10" style="width: 32%">
                <div slot="header" class="clearfix">
                  <span>到达目的地</span>
                </div>
                <!-- <template v-for="pics in form.takeOss">
                  <el-image :src="pics.url" style="width: 120px;height: 80px;margin-right: 10px;"
                   :preview-src-list="[pics.url]"/>
                </template> -->
                <el-image v-if="form.takeOss && form.takeOss.length > 0" v-for="(pic,pindex) in form.takeOss"
                style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')" fit="scale-down"
                :preview-src-list="ossTransfer(form.takeOss,'list')"></el-image>
              </el-card>
              <el-card class="fl mr10 mb10" style="width: 32%">
                <div slot="header" class="clearfix">
                  <span>卸车</span>
                </div>
                <!-- <template v-for="pics in form.unloadOss">
                  <el-image :src="pics.url" style="width: 120px;height: 80px;margin-right: 10px;"
                   :preview-src-list="[pics.url]"/>
                </template> -->
                <el-image v-if="form.unloadOss && form.unloadOss.length > 0" v-for="(pic,pindex) in form.unloadOss"
                style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')" fit="scale-down"
                :preview-src-list="ossTransfer(form.unloadOss,'list')"></el-image>
              </el-card>
              <el-card class="fl mr10 mb10" style="width: 32%">
                <div slot="header" class="clearfix">
                  <span>其他</span>
                </div>
                <!-- <template v-for="pics in form.otherOss">
                  <el-image :src="pics.url" style="width: 120px;height: 80px;margin-right: 10px;"
                   :preview-src-list="[pics.url]"/>
                </template> -->
                <el-image v-if="form.otherOss && form.otherOss.length > 0" v-for="(pic,pindex) in form.otherOss"
                style="width: 120px; height: 60px;margin-right: 5px;" :src="ossTransfer(pic,'one')" fit="scale-down"
                :preview-src-list="ossTransfer(form.otherOss,'list')"></el-image>
              </el-card>
            </el-card>
          </el-tab-pane>
          <el-tab-pane>
            <span slot="label"><i class="el-icon-truck"></i> 运单信息</span>
            <el-tabs type="border-card">
              <template v-for="item in form.wayItems">
                 <el-tab-pane>
                   <span slot="label"><i class="el-icon-document"></i> {{item.waybillNo}}</span>
                   <el-descriptions direction="vertical" :column="4" border>
                     <el-descriptions-item label="线路">{{item.lineName}}</el-descriptions-item>
                     <el-descriptions-item label="车次">{{item.scheduleName}}</el-descriptions-item>
                     <el-descriptions-item label="车牌号">{{item.carNumber}}</el-descriptions-item>
                     <el-descriptions-item label="司机">{{item.driverName}}</el-descriptions-item>
                     <el-descriptions-item label="派单时间">{{parseTime(item.dispatchTime, '{y}-{m}-{d}')}}</el-descriptions-item>
                     <el-descriptions-item label="接单时间">{{parseTime(item.takeBillTime, '{y}-{m}-{d}')}}</el-descriptions-item>
                     <el-descriptions-item label="取件时间">{{parseTime(item.takeTime, '{y}-{m}-{d}')}}</el-descriptions-item>
                     <el-descriptions-item label="发车时间">{{parseTime(item.sendTime, '{y}-{m}-{d}')}}</el-descriptions-item>
                     <el-descriptions-item label="派送时间">{{parseTime(item.deliverTime, '{y}-{m}-{d}')}}</el-descriptions-item>
                     <el-descriptions-item label="送达时间">{{parseTime(item.arriveTime, '{y}-{m}-{d}')}}</el-descriptions-item>
                   </el-descriptions>
                   <el-row :gutter="15" style="margin-top: 10px;">
                     <el-col :span="12">
                       <el-card>
                         <div slot="header" class="clearfix">
                           <span>物流跟踪</span>
                           <div class="block mt10">
                             <el-timeline>
                               <template v-for="log in item.logItems">
                                 <el-timeline-item  :timestamp="parseTime(log.createTime, '{y}-{m}-{d}')" placement="top">
                                   <el-card>
                                     <h4>操作人:{{log.operator}}</h4>
                                     <p v-for="dict in dict.type.tms_track_log_type" v-if="dict.value == log.type">操作类型：{{dict.label}}</p>
                                     <p>操作时间：{{parseTime(log.createTime, '{y}-{m}-{d}')}}</p>
                                   </el-card>
                                 </el-timeline-item>
                               </template>
                               </el-timeline>
                           </div>
                         </div>
                       </el-card>
                     </el-col>
                     <el-col :span="12">
                        <amap-driving-line ref="amap"></amap-driving-line>
                     </el-col>
                   </el-row>
                 </el-tab-pane>
              </template>
            </el-tabs>
          </el-tab-pane>
        </el-tabs>
      </el-main>
      <el-footer>
        <div class="footerDivClass">
          <!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
          <el-button @click="close()">返 回</el-button>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
  import {
    getOrder,
    addOrder,
    updateOrder
  } from "@/api/tms/order";
  import {listWaybillDtl} from '@/api/tms/waybillDtl'
    import AmapDrivingLine from "@/components/AmapDrivingLine";
  export default{
    dicts:['tms_order_status','tms_track_log_type'],
    components:{AmapDrivingLine},
    data(){
      return{
        // 表单参数
        form: {},
      }
    },
    created() {
      const id = this.$router.currentRoute.params.id;
      if(id != undefined && id != ''){
        this.getOrderInfo(id)
      }
    },
    methods:{
      getOrderInfo(id){
        getOrder(id).then(response=>{
          this.form = response.data;

        })
      },
      /** 关闭按钮 */
      close() {
        const obj = {
          path: "/tms/order",
          query: { t: Date.now(), pageNum: this.$route.query.pageNum },
        };
        this.$tab.closeOpenPage(obj);
      },
    }
  }
</script>

<style lang="scss" scoped>
  .input-width{
    width: 214px;
  }

  .mainDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .main_container {
    width: 100%;
    height: 100%;
  }
  .el-card {
    margin-bottom: 5px;
  }
  .el-footer {
    background-color: #ffffff;
    color: #333;
    text-align: right;
    line-height: 60px;
    border-top: 1px solid #e6ebf5;
    box-shadow: 0px 0px 10px #cdcdcd;
    z-index: 1000;
  }
  .footer-class {
    text-align: right;
    margin-top: 15px;
  }
  //顶部距离css
  .topItem {
    margin-bottom: 0px;
  }
  .areaSelect {
    width: 100%;
    padding-right: 5px;
  }
</style>
